<template>
  <div class="serHea">
    <div class="searIn" @click="cancel">
      <i class="fa fa-search" aria-hidden="true"></i>
      <span>搜索喜欢的内容</span>
    </div>
    <!-- 头部导航栏 -->
    <!-- <div>
      <tab>
        <tab-item selected>
          <router-link to="/recommend">推荐
        </router-link>
        </tab-item>
        <tab-item><router-link to="/square">广场
        </router-link></tab-item>
        <tab-item><router-link to="/original">原创
        </router-link></tab-item>
       <tab-item><router-link to="/topic">话题
        </router-link></tab-item>
        <tab-item selected link='/recommend'>情感</tab-item>
        <tab-item link='/square'>励志</tab-item>
        <tab-item link='/original'>毒汤</tab-item>
        <tab-item link='/topic'>英文</tab-item>
        <tab-item link='/recommend'>订阅</tab-item>
      </tab>
    </div> -->
  </div>
</template>
<script>
// recommend推荐
import { Tab, TabItem } from "vux";
import cancel from "./cancel"
export default {
  data() {
    return {};
  },
  components: {
    Tab,
    TabItem,
    cancel
  },
  methods: {
    cancel:function(){
      console.log(123)
      this.$router.push('./cancel')
    }
  },
};
</script>
<style scoped>
.serHea{
  width: 98vw;
  position: fixed;
  top:0;
  background-color: #ffffff;
  z-index: 900;
}
.searIn {
  border: 1px solid black;
  width: 90vw;
  height: 6vw;
  margin: 3vw 5vw;
  border-radius: 10vw;
  text-align: center;
  color: #b3b3b3;
  font-size: 3.6vw;
}
</style>